import { FC, ReactNode } from "react";
import styles from "./index.module.less";

interface BorderCardProps {
  title: ReactNode;
  children?: ReactNode;
  width?: string | number;
  height?: string | number;
  operArea?: ReactNode;
  operAreaContainerStyle?: React.CSSProperties;
  isShowOperArea?: boolean;
  operAreaOfTitleRight?: boolean;
}

const NewBorderCard: FC<BorderCardProps> = (props: BorderCardProps) => {
  const { isShowOperArea = false, operAreaOfTitleRight = false } = props;
  return (
    <div
      className={styles["new-border-card"]}
      style={{ width: props.width, height: props.height }}
    >
      {/* 头部 */}
      <div className={styles["header"]}>
        <div className={styles["left"]}></div>
        <div
          className={styles["center"]}
          style={{
            ...props?.operAreaContainerStyle,
          }}
        >
          {isShowOperArea && !operAreaOfTitleRight ? props?.operArea : <></>}
        </div>
        <div className={styles["right"]}></div>
      </div>
      {/* 中间 */}
      <div className={styles["body"]}>
        <div className={styles["left"]}></div>
        <div className={styles["center"]}></div>
        <div className={styles["right"]}></div>
      </div>
      {/* 底部 */}
      <div className={styles["footer"]}>
        <div className={styles["left"]}></div>
        <div className={styles["center"]}></div>
        <div className={styles["right"]}></div>
      </div>
      {/* title */}
      <div
        style={{
          position: "absolute",
          top: 24,
          left: 24,
          width: "91.5%",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        {props.title}
        {isShowOperArea && operAreaOfTitleRight ? props?.operArea : <></>}
      </div>
      {/* body */}
      <div
        style={{
          position: "absolute",
          top: 62,
          left: 24,
          width: "calc(100% - 48px)",
          height: "calc(100% - 86px)",
        }}
      >
        {props.children}
      </div>
    </div>
  );
};

export default NewBorderCard;
